import {
  MailOutlined,
  SettingOutlined,
  AppstoreOutlined,
} from "@ant-design/icons";
import { Menu } from "antd";
import { useState } from "react";
function getItem(label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type,
  };
}
const items = [
  getItem("设置1", "sub1", <MailOutlined />, [
    getItem("项1_1", "1"),
    getItem("项1_2", "2"),
    getItem("项1_3", "3"),
    getItem("项1_4", "4"),
  ]),
  getItem("设置2", "sub2", <AppstoreOutlined />, [
    getItem("项2_1", "5"),
    getItem("项2_2", "6"),
    getItem("设置3", "sub3", null, [
      getItem("项3_1", "7"),
      getItem("项3_2", "8"),
    ]),
  ]),
  getItem("设置4", "sub4", <SettingOutlined />, [
    getItem("项4_1", "9"),
    getItem("项4_2", "10"),
    getItem("项4_3", "11"),
    getItem("项4_4", "12"),
  ]),
  getItem("设置5", "sub5", <SettingOutlined />, [
    getItem("项5_1", "13"),
    getItem("项5_2", "14"),
    getItem("项5_3", "15"),
    getItem("项5_4", "16"),
  ]),
  getItem("设置6", "sub6", <SettingOutlined />, [
    getItem("项6_1", "17"),
    getItem("项6_2", "18"),
    getItem("项6_3", "19"),
    getItem("项6_4", "20"),
  ]),
];

// submenu keys of first level
const rootSubmenuKeys = ["sub1", "sub2", "sub4"];
const navLeft = () => {
  const [openKeys, setOpenKeys] = useState(["sub1"]);
  const onOpenChange = (keys) => {
    const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
    if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      setOpenKeys(keys);
    } else {
      setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
    }
  };
  return (
    <Menu
      className=" bg-slate-100/50"
      mode="inline"
      openKeys={openKeys}
      onOpenChange={onOpenChange}
      style={{
        width: "100%",
        height: "100%",
      }}
      items={items}
    />
  );
};
export default navLeft;
